<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div style="width: 100%;">
        <input id='input' type="text">
        <button onclick="changeType()">改变类型</button>
        <button onclick="focusInput()">获取焦点</button>
        <button onclick="changeTypeAndFocus()">改变类型，并获取焦点</button>
        <button onclick="focusThenChangeType()">获取焦点，并稍后改变类型</button>
        <button onclick="focusAndChangeType()">获取焦点，并改变类型</button>
    </div>
</body>

<script>
    function changeType () {
        const inputEl = document.querySelector('#input')
        const type = inputEl.type;
        inputEl.type = type === 'text' ? 'password' : 'text'
    }
    function focusInput () {
        document.querySelector('#input').focus()
    }
    function changeTypeAndFocus () {
        changeType()
        focusInput()
    }
    function focusThenChangeType () {
        focusInput()
        setTimeout(() => {
            changeType()
        }, 0)
    }
    function focusAndChangeType () {
        focusInput()
        changeType()
    }
</script>
</html>